<template>
  <div id="app">
    {{ count }}
    <br />
    {{ doubleCount }}
    <br />
    <button @click="INCREMENT(2)">count++</button>&nbsp;
    <button @click="DECREMENT">count--</button>&nbsp;
    <button @click="ASYN_INCREMENT(3)">异步count++</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  computed: {
    // ...mapState({
    //   count: state => state.moduleA.count
    // }),
    ...mapState("moduleA", {
      count: state => state.count
    }),
    ...mapGetters("moduleA", ["doubleCount"])
  },
  methods: {
    // 如果是多级命名空间的话，要用 / 来连接
    ...mapActions("moduleA", ["INCREMENT", "DECREMENT", "ASYN_INCREMENT"])
  }
};
</script>

<style scoped>
#app {
  text-align: center;
}
</style>